<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>闯关遇见你 💗</title>
  <style>
    body {
      margin: 0;
      background: linear-gradient(to bottom, #fff0f5, #ffeef3);
      font-family: 'Helvetica Neue', sans-serif;
      overflow: hidden;
    }
    .intro {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.85);
      padding: 1em 1.5em;
      border-radius: 12px;
      text-align: center;
      font-size: 14px;
      color: #880e4f;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      z-index: 999;
    }
    canvas {
      display: block;
      margin: 0 auto;
      background: #fce4ec;
      border-bottom: 6px solid #ec407a;
    }
    .dialog {
      position: fixed;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 2em;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      display: none;
    }
    .dialog button {
      margin-top: 1em;
      margin-right: 0.5em;
      padding: 0.5em 1.2em;
      background: #ec407a;
      color: white;
      border: none;
      border-radius: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="intro">
    小提示 💡：你是 cx，要穿越障碍去见心爱的 ty。<br>
    点一下或按下空格即可跳跃，快去拥抱你的幸福吧！
  </div>

  <canvas id="game" width="800" height="300"></canvas>
  <div class="dialog" id="dialog">
    <p>终于见到你啦，ty 💖</p>
    <button onclick="location.href='final-page.html'">一起走向未来 →</button>
    <button onclick="window.location.reload()">咱再玩一遍 🎮</button>
  </div>

  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');

    let cx = { x: 50, y: 270, vy: 0, jumping: false };
    const gravity = 1;
    const ground = 270;

    const obstacles = [
      { x: 250, y: 260, width: 10, height: 10 },
      { x: 400, y: 260, width: 10, height: 10 },
      { x: 550, y: 260, width: 10, height: 10 }
    ];

    const goal = { x: 750, y: 260, width: 30, height: 50 };
    const fireworks = [];

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = '#f8bbd0';
      ctx.fillRect(0, ground + 10, canvas.width, 20);

      ctx.font = '28px serif';
      ctx.fillText('🧍‍♂️', cx.x, cx.y);

      ctx.fillStyle = '#d81b60';
      obstacles.forEach(ob => {
        ctx.fillRect(ob.x, ob.y, ob.width, ob.height);
      });

      ctx.font = '28px serif';
      ctx.fillText('👧', goal.x, goal.y);

      fireworks.forEach(p => {
        ctx.fillStyle = p.color;
        ctx.beginPath();
        ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
        ctx.fill();
      });
    }

    function update() {
      cx.x += 3;
      if (cx.jumping) {
        cx.vy += gravity;
        cx.y += cx.vy;
        if (cx.y >= ground) {
          cx.y = ground;
          cx.vy = 0;
          cx.jumping = false;
        }
      }

      for (const ob of obstacles) {
        if (cx.x + 20 > ob.x && cx.x < ob.x + ob.width && cx.y > ob.y) {
          cx.x = 50;
          cx.y = ground;
          alert('摔倒啦～ 再来一次吧！');
          return;
        }
      }

      fireworks.forEach(p => {
        p.x += p.vx;
        p.y += p.vy;
        p.life--;
      });
      for (let i = fireworks.length - 1; i >= 0; i--) {
        if (fireworks[i].life <= 0) {
          fireworks.splice(i, 1);
        }
      }

      if (cx.x > goal.x - 10) {
        document.getElementById('dialog').style.display = 'block';
        clearInterval(gameLoop);
        launchFireworks();
      }

      draw();
    }

    function jump() {
      if (!cx.jumping) {
        cx.vy = -15;
        cx.jumping = true;
      }
    }

    function launchFireworks() {
      for (let i = 0; i < 60; i++) {
        fireworks.push({
          x: goal.x,
          y: goal.y,
          vx: (Math.random() - 0.5) * 6,
          vy: (Math.random() - 0.5) * 6,
          color: `hsl(${Math.random() * 360}, 100%, 70%)`,
          life: 60
        });
      }
    }

    window.addEventListener('click', jump);
    window.addEventListener('keydown', e => {
      if (e.code === 'Space') jump();
    });

    draw();
    const gameLoop = setInterval(update, 30);
  </script>
</body>
</html>
